<!DOCTYPE html>
<html>
<head>
    <title>活动信息</title>
    #parse("sys/header.html")
<!--<script src="https://cdn.bootcss.com/echarts/4.0.4/echarts.min.js"></script>-->
    <script   src="https://lib.baomitu.com/echarts/4.0.4/echarts.min.js"></script>
</head>
<body>
<div id="rrapp" v-cloak>


    <div class="panel panel-success" style="margin-top: 30px;">
        <div class="panel-heading">统计产品借阅频次</div>
        <form class="form-horizontal" onsubmit="return false">
            <div id="main" style="height:400px;width: 900px;margin: auto"></div>
        </form>
    </div>
</div>

<script>


    var vm = new Vue({
        el: '#rrapp',
        data: {list: []},
        created: function () {
            $.get("../record/tj", {}, function (r) {
                var vs2 = [];
                var vs3 = [];
                var names = []
                for (var i = 0; i < r.list.length; i++) {
                    vs2.push(r.list[i].v);
                    names.push(r.list[i].name);
                }


                var myChart = echarts.init(document.getElementById("main"));
                var option = {
                    title: {
                        text: '统计产品借阅频次',
                        subtext: ' '
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['次数']
                    },
                    //右上角工具条
                    toolbox: {
                        show: true,
                        feature: {
                            mark: {show: true},
                            dataView: {show: true, readOnly: false},
                            magicType: {show: true, type: ['line', 'bar']},
                            restore: {show: true},
                            saveAsImage: {show: true}
                        }
                    },
                    calculable: true,
                    xAxis: [
                        {
                            type: 'category',
                            boundaryGap: false,
                            data: names
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            axisLabel: {
                                formatter: '{value} '
                            }
                        }
                    ],
                    series: [{
                        name: '次数',
                        type: 'bar',
                        data: vs2,
                        barWidth: 20
                    }]
                };


                // 为echarts对象加载数据
                myChart.setOption(option);


            })

        }
    })
</script>
</body>
</html>